<template>
  <div>
    <div class="map-class">
      <div class="map-content-top">
        <div class="fwb fs20 ">
          农业总产值(万元)
        </div>
        <div class="df aic mt10 ">
          <div
            class="value-number-box df aic jcc mr10"
            v-for="item in [0, 0, 6, 2, 0, 9]"
            :key="item"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div id="map" style="width: 710px;height:500px ;"></div>
    </div>
    <div class="zhnc-class">
      <div class="nzwqk-class-title">
        按城镇划分
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>
      <div class="zhnc-table">
        <swiper :options="swiperOption" ref="mySwiper" style="height: 290px;">
          <swiper-slide
            class="df aic zhnc-table-th mb8"
            v-for="item in 15"
            :key="item"
            style="height: 30px;"
          >
            <div class="fs14 textOver">码头镇</div>
            <div class="fs14 textOver">王老农智慧农场</div>
            <div class="fs14 textOver">169.99</div>
            <div class="fs14 textOver">大青菜、大白菜、萝卜</div>
            <div class="fs14 textOver">
              <img
                style="width: 24px;height: 24px;"
                src="@/assets/government/digitalFarmland/gou.png"
              />
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import suzhou from "@/map/sz";
let timer = null;

export default {
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        loop: true,
        freeMode: true,
        slidesPerView: "auto",
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
          clickable: true,
        },
      },
      areaList: [{ cityName: suzhou, areaName: "苏州市" }],
    };
  },
  mounted() {
    this.intinzwqk();
  },
  destroyed() {
    timer = null;
  },
  methods: {
    intinzwqk() {
      let data = [
        { name: "张家港市", value: 4075 },
        { name: "常熟市", value: 4075 },
        { name: "太仓市", value: 4075 },
        { name: "吴中区", value: 4075 },
      ];
      const item = this.areaList;
      const cityName = this.areaList[0].areaName;
      this.$echarts.registerMap(cityName, item[0].cityName);
      let myChart = this.$echarts.init(document.getElementById("map"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        geo: [
          {
            show: true,
            map: cityName,
            zoom: 1.0,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: 10,
                  fontFamily: "Arial",
                },
              },
              emphasis: {
                //动态展示的样式
                color: "#fff",
              },
            },
            regions: [
              {
                name: "张家港市",
                itemStyle: {
                  normal: {
                    areaColor: new this.$echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "#0E7D9E" },
                        { offset: 1, color: "#05D4F4 " },
                      ]
                    ),
                  },
                },
              },
              {
                name: "昆山市",
                itemStyle: {
                  normal: {
                    areaColor: new this.$echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "#5257C6" },
                        { offset: 1, color: "#8FCCFD " },
                      ]
                    ),
                  },
                },
              },
              {
                name: "吴中区",
                itemStyle: {
                  normal: {
                    areaColor: new this.$echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "#0E7D9E" },
                        { offset: 1, color: "#05D4F4" },
                      ]
                    ),
                  },
                },
              },
            ],
            tooltip: {
              trigger: "item",
              backgroundColor: "transparent",
              borderColor: "transparent",
              extraCssText: "z-index:100;color:#fff;",
              confine: true, //是否将 tooltip 框限制在图表的区域内
              formatter: function(params, ticket, callback) {
                console.log(params, ticket, callback);
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                res = `<div class="map-class-item-box" style="text-align:left">
                             <div style='color:#ffffff; font-size: 24px;font-weight:bold'>${name}</div>
                             <div style='color:#ffffff; font-size: 18px;margin-top:12px'>
                              负责人：路飞
                              </div>
                             <div class="df aic jcsa mt20">
                               <div style="color:#FEC87F" class="fs20 fwb">200</div>
                              <div style="color:#FEC87F;text-align:center" class="fs20 fwb">
                                43
                                <div style="color:white" class="fs14">农户数量(户)</div>
                                </div>
                              <div style="color:#FEC87F;text-align:center" class="fs20 fwb">945
                                 <div style="color:white" class="fs14">基地面积(亩)</div>
                                </div></div>
                            </div>

                          </div>`;
                return res;
              },
            },
            roam: false, // 是否开启鼠标滚轮缩放
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "#fff",
                },
                color: "#fff",
                borderColor: "#32CBE0",
                borderWidth: 1.5,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1000,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "#0D59C1", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#53C9C7", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                },
                borderWidth: 3,
                borderColor: "rgba(255, 230, 175,0.8)",
                shadowColor: "rgba(255, 230, 175,0.5)",
                shadowBlur: 30,
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                  backgroundColor: "transparent",
                },
                areaColor: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#1cfbfe",
                    },
                    {
                      offset: 1,
                      color: "#3348e7",
                    },
                  ],
                  false
                ),
              },
            },
          },

          {
            type: "map",
            map: cityName,
            zlevel: -2,
            zoom: 1.0,
            layoutCenter: ["51%", "52.4%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderColor: "rgba(35, 161, 184,0.5)",
                shadowColor: "rgba(35, 161, 184,0.8)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "#257AB2",
              },
            },
          },
        ],
        series: [
          {
            type: "map",
            map: cityName,
            zoom: 1.0,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: 10,
                  fontFamily: "Arial",
                },
              },
              emphasis: {
                //动态展示的样式
                color: "#fff",
              },
            },

            tooltip: {
              trigger: "item",
              backgroundColor: "transparent",
              borderColor: "transparent",
              extraCssText: "z-index:100;color:#fff;",
              confine: true, //是否将 tooltip 框限制在图表的区域内
              formatter: function(params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                res = `<div class="map-class-item-box" style="text-align:left">
                             <div style='color:#ffffff; font-size: 24px;font-weight:bold'>${name}</div>
                             <div style='color:#ffffff; font-size: 18px;margin-top:12px'>
                              负责人：路飞
                              </div>
                             <div class="df aic jcsa mt20">
                               <div style="color:#FEC87F" class="fs20 fwb">200</div>
                              <div style="color:#FEC87F;text-align:center" class="fs20 fwb">
                                43
                                <div style="color:white" class="fs14">农户数量(户)</div>
                                </div>
                              <div style="color:#FEC87F;text-align:center" class="fs20 fwb">945
                                 <div style="color:white" class="fs14">基地面积(亩)</div>
                                </div></div>
                            </div>

                          </div>`;
                return res;
              },
            },
            roam: false, // 是否开启鼠标滚轮缩放
            itemStyle: {
              opacity: 0,
            },
            data: data,
          },

          {
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              brushType: "fill",
            },
            label: {
              show: true,
              color: "#fff",
              formatter: function(obj) {
                return obj.name;
              },
            },

            showEffectOn: "render", //加载完毕显示特效
            itemStyle: {
              normal: {
                color: "#FEBE13", // 圆点的颜色
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 6,
            data: [[120.67825600000003, 31.31438200000001]],
          },
        ],
      });
      let count = 0;
      let dataLength = data.length;
      timer && clearInterval(timer);
      timer = setInterval(() => {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 3000);
    },
  },
};
</script>
<style>
.map-class-item-box {
  background-image: url(".././../../../assets/government/digitalFarmland/9.png") !important;
  width: 283px;
  height: 169px;
  padding: 36px 12px 12px;
}
</style>
<style lang="scss" scoped>
.zhnc-class {
  width: 712px;
  height: 402px;
  background-image: url(".././../../../assets/government/digitalFarmland/6.png");
  .zhnc-table {
    padding-top: 100px;
    padding-left: 20px;
  }
  .zhnc-table-th {
    text-align: center;
    div:nth-child(1) {
      width: 70px;
    }
    div:nth-child(2) {
      margin-left: 5px;
      width: 150px;
      color: #00f6ff;
      text-decoration: underline;
    }
    div:nth-child(3) {
      margin-left: 5px;
      width: 90px;
    }
    div:nth-child(4) {
      margin-left: 5px;
      width: 190px;
    }
    div:nth-child(5) {
      margin-left: 5px;
      width: 150px;
    }
  }
  .nzwqk-class-title {
    width: 158px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
}
.map-class {
  width: 712px;
  margin-left: 25px;
  height: 560px;
  text-align: left;
  .value-number-box {
    width: 41px;
    height: 46px;
    border-radius: 4px;
    background-color: rgba(0, 114, 255, 0.6);
    font-size: 42px;
    font-weight: bold;
  }
}
</style>
